
import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
  Image,
  TouchableOpacity,
  Switch,
} from 'react-native';
export default class CommonMyCell extends Component {
  constructor(props){
    super(props);
    this.state={
      
    };
  }
  rightSubView(){
    return(
      <View style={{flexDirection:'row',alignItems:'center'}}>
        {this.renderRightContent()}
        <Image source={{uri:'icon_cell_rightarrow'}} style={{width:8,height:13,marginRight:8,marginLeft:5}}/>
      </View>
    );
  }
  renderRightContent(){
    if(this.props.rightIconName){
      return(
        <Image source={{uri:this.props.rightIconName}} style={{width:24,height:13}}/>
      );
    } else {
      return(
        <Text style={{color:'gray'}}>{this.props.rightTitle}</Text>
      );
    }
  }
  render() {
    return (
      <TouchableOpacity activeOpacity={0.5}>
        <View style={styles.container}>
          <View style={styles.leftView}>
            <Image source={{uri:this.props.leftIconName}} style={styles.leftImageStyle}/>
            <Text style={styles.leftTitleStyle}>{this.props.leftTitle}</Text>
          </View>

          <View style={styles.rightView}>
            {this.rightSubView()}
          </View>
        </View>
      </TouchableOpacity>
    );
  }
}

const styles = StyleSheet.create({
  container:{
    height:Platform.OS==='ios'?40:40,
    backgroundColor:'white',
    flexDirection:'row',
    justifyContent:'space-between',
    alignItems:'center',
    borderBottomColor:'#e8e8e8',
    borderBottomWidth:0.5,
  },
  leftTitleStyle:{
    fontSize:16,
  },
  leftImageStyle:{
    width:24,
    height:24,
    marginRight:6,
    borderRadius:12,
  },
  leftView:{
    flexDirection:'row',
    alignItems:'center',
    marginLeft:8,
  },
  rightView:{
    flexDirection:'row',
  }
});
